<template>
    <div class="e-table billList">
        <TopStep :stepInfo="stepInfo" />
        <div class="top">
            <div class="left" style="margin-left: 10px">
                <div>
                    <el-button
                        size="mini"
                        @click="buttonAdd"
                        style="background: #7aa818; color: #fff"
                        >新增</el-button
                    >
                </div>
            </div>
            <div class="right">
                <div class="right-div1">
                    <el-input
                        placeholder=""
                        v-model="query.keyWord"
                        size="small"
                    >
                        <i
                            slot="suffix"
                            class="el-icon-search like"
                            @click="getData"
                        ></i>
                    </el-input>
                </div>
                <div>
                    <el-button
                        size="small"
                        style="background: #2e61d7; color: #fff"
                        @click="advancedSearchEvent"
                        >高级搜索</el-button
                    >
                </div>
            </div>
        </div>

        <el-table
            border
            ref="table"
            :data="tableData"
            style="width: 100%"
            class="table"
            highlight-current-row
            height="0"
            v-sortTable="{ 'tableData': tableData, '_this': this, 'ref': 'table' }"
        >
            <el-table-column
                label="结算编号"
                min-width="170"
                fixed
                show-overflow-tooltip
            >
                <template slot-scope="scope">
                    <span
                        @click="Examine(scope.row)"
                        style="color: blue; cursor: pointer"
                    >
                        {{ scope.row.billNo }}
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                fixed
                prop="settleDate"
                label="结算日期"
                width="100">
            </el-table-column>
            <el-table-column
                fixed
                prop="orgName"
                label="机构"
                width="150">
            </el-table-column>
             <el-table-column
                prop="settleOrgName"
                label="结算单位"
                min-width="150"
                show-overflow-tooltip
            >
            </el-table-column>

            <el-table-column
                prop="taxExcludedAmount"
                label="不含税结算金额（元）"
                min-width="150"
            >
            </el-table-column>
            <el-table-column
                prop="totalTaxPrice"
                label="税价合计（元）"
                min-width="100"
            >
            </el-table-column>
            <el-table-column
                prop="totalSettleAmount"
                label="累计结算金额（元）"
                width="150"
            >
            </el-table-column>
             <el-table-column
                prop="settleType"
                label="结算类型"
                width="100"
            >
                <template slot-scope="{ row }" >
                        {{setSettleType(row)}}
                </template>
            </el-table-column>
              <el-table-column
                label="源单编号"
                width="100"
                prop="contractNo"
            >
                <template v-slot="{ row }">
                    <span
                        style="color: blue; cursor: pointer"
                        @click="seeSourceOrder(row)"
                        >{{ row.contractNo }}</span
                    >
                </template>
             </el-table-column>
            <el-table-column label="状态" prop="state" show-overflow-tooltip width="100">
                <template slot-scope="{ row,$index }">
                    <ToolHistory v-if="row.stateKey == 1" :key="$index" url="/turnoversettle/audit/getAuditHistory" :billId="row.billId" :billType="6098">
                        <span v-status="row.stateKey">
                            {{row.state}}
                        </span>
                    </ToolHistory>
                    <span v-else v-status="row.stateKey">
                        {{row.state}}
                    </span>
                </template>
            </el-table-column>
            <el-table-column label="红单状态" width="100" prop="redState">
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <ComPagination
            :total="total"
            :pageSize.sync="query.limit"
            :currentPage.sync="query.page"
            @currentChange="getData"
            @sizeChange="getData"
            class="bottomSetting"
        />
    </div>
</template>
<script>
import ComPagination from '@/components/pagination/pagination.vue'
import TopStep from '@/components/topstep/topstep'
import { vueDom, debounce, openAppClient, advanceSearch } from '@/utils/common.js'
import request from '@/api/settlementManagement/weeklyMaterialSettlement/rentalTradeIncome.js'
import publicRequest from '@/api/settlementManagement/publicRequest/publicRequest.js'

export default {
    components: {
        ComPagination,
        TopStep
    },
    data () {
        return {
            keyword: '',
            tableData: [],
            query: {
                'keyWord': '',
                'limit': 20,
                'page': 1,
                'search': {
                    'endTime': '',
                    'orgId': '',
                    'settleOrgName': '',
                    'startTime': '',
                    'states': []
                }
            },
            total: 0,
            tableHeight: 0,
            auditParams: {
                billId: '',
                billType: 6098,
                freeNextUnitIndex: 0,
                freeNextUser: '',
                isPass: true,
                isShareInAudit: true,
                opinion: ''
            },
            //标题进度
            stepInfo: [
                {
                    description: '临时需用计划'
                },
                {
                    description: '周材租赁合同'
                },
                {
                    description: '周材验收'
                },
                {
                    description: '租赁收入结算'
                }
            ]
        }
    },
    computed: {
    },
    created () {
        this.getData()
    },
    mounted () {
        // table动态高度
        vueDom(
            () => {
                this.tableHeight = document.body.clientHeight - 240
            },
            () => {
                return $('table').length !== 0
            }
        )
        this.fn = () => {
            this.tableHeight = document.body.clientHeight - 240
        }
        window.onresize = debounce(this.fn)
    },
    methods: {
        // 获取列表数据
        async getData () {
            const res = await request.getRentalTradeIncomeListData(this.query)
            const data = res.list
            //状态
            const obj = {
                '-1': '已删除',
                '0': '草稿',
                '1': '审核中',
                '2': '已审核',
                '5': '已作废'
            }
            //红单状态
            const redObj = {
                '-1': '普通单据',
                '0': '草稿',
                '1': '审核中',
                '2': '已审核',
                '3': '红单'
            }
            data.forEach(item => {
                item.stateKey = item.state
                item.state = obj[item.state]
                item.redState = redObj[item.redState]
            })
            this.tableData = data
            this.total = res.totalCount
        },
        //新增按钮
        buttonAdd () {
            this.$router.push('/rentalTradeIncomeAdd')
        },
        //点击编号
        Examine (row) {
            // this.$router.push({
            //     path: '/rentalTradeIncomeDetail',
            //     query: { billid: row.billId }
            // })
            if (row.stateKey === -1 || row.stateKey === 2 || row.stateKey === 5) {
                this.$router.push({
                    path: '/rentalTradeIncomeDetail',
                    query: { billid: row.billId }
                })
            } else {
                this.auditParams.billId = row.billId
                publicRequest.adoptIdObtainGetButtonsData(this.auditParams).then(res => {
                    if (res.canModify == true) {
                        this.$router.push({
                            path: '/rentalTradeIncomeEdit',
                            query: { billid: row.billId }
                        })
                    } else {
                        this.$router.push({
                            path: '/rentalTradeIncomeDetail',
                            query: { billid: row.billId }
                        })
                    }
                })
            }
        },
        //当前结算类型
        setSettleType (row) {
            const obj = {
                1: '内部列账',
                2: '外来发票',
            }
            return obj[row.settleType]
        },

        //查看源单页面
        seeSourceOrder (row) {
            openAppClient(
            `/ctleaseIncomeApplyShow?billid=${row.contractNo}&isview=true`, '周材租赁收入合同详情'
            )
        },

        // redClick (row) {
        //     this.auditParams.billId = row.billId
        //     if (row.redBillState == 3) {
        //         // 如果该单据就是红单,则点击时进入源单详情页
        //         this.$router.push({
        //             path: '/weeklyMaterialAccDetail',
        //             query: { billid: row.sourceId }
        //         })
        //     } else {
        //         // 如果点击的该单据不是红单,则点击超链接进入红单
        //         // 如果进入红单,还需判断进入该红单的编辑页还是详情页
        //         if (row.redBillState == 0) {
        //             this.$router.push({
        //                 path: '/weeklyMaterialAccEdit',
        //                 query: { billid: row.sourceId }
        //             })
        //         } else if (row.redBillState == 1 || row.redBillState == 2) {
        //             this.$router.push({
        //                 path: '/weeklyMaterialAccDetail',
        //                 query: { billid: row.sourceId }
        //             })
        //         }
        //     }
        // }

        //高级搜索
        advancedSearchEvent () {
            advanceSearch('/rentalTradeIncomeSearch')
                .then(res=>{
                    this.query.keyWord = ''
                    this.query.limit = 20
                    this.query.page = 1
                    this.query.search = res
                    this.getData()
                })
        },
    }
}
</script>
<style lang="scss" scoped>
::v-deep.el-table .cell {
    text-align: center;
}

.e-table {
    min-height: 97.3vh;
}
</style>
